<template>
  <div>
    <h2>计算属性computed</h2>
    <!-- 计算属性有缓存的特点  保存在内存中  下次再调用是 函数就不在重新计算 就直接从缓存中取出来用 -->
    <!-- <p>{{xing}} {{ming}}</p> -->
    <!-- <p>{{ fullname }}</p> -->

    <!-- .lazy  懒加载  失去焦点时3数据才会发生改变 -->
    <!-- 计算属性默认情况下 只能去调用它 不能去改变它  -->
    <!-- 如果需要改计算属性  那我们就不能写成函数格式  需要写成对象格式 -->
    <input type="text" v-model.lazy="xing" />
    <input type="text" v-model.lazy="ming" />
    <input type="text" v-model.lazy="fullname" />

    <!-- <h3>用方法methods</h3> -->
    <!-- 方法调用需要加小括号 -->
    <!-- <p>{{ getfullName() }}</p> -->

    <!-- 二者区别是  计算属性计算一次就缓存了函数只执行了一次 ;  而方法就会调用多次 执行多次  所以计算属性在性能上会更好一些,更高效. -->
  </div>
</template>

<script>
export default {
  //data里面放数据  methods里放方法   computed里面放计算属性

  data() {
    return {
      xing: "夏",
      ming: "从政 ",
    };
  },
  // methods: {
  //   getfullName() {},
  // },
  computed: {
    //--------------------------------函数形式计算属性  只能调用 不能修改-------------------------------------
    //计算属性(){
    //return '计算的结果'
    // }
    // fullname() {
    //   return this.xing + this.ming;
    // },

    //----------------------如果需要修改计算属性的值  需要写成对象格式---------------------------
    fullname: {
      //调用计算属性的时候,get就会执行
      get() {
        // return this.xing + this.ming;
        return this.xing + " " + this.ming;
      },
      //当修改计算属性的时候,set就会执行.形参表示修改后的值
      set(value) {
        // console.log(value);
        let arr = value.split(" "); //['','']
        this.xing = arr[0];
        this.ming = arr[1];
      },
    },
  },
};
</script>

<style lang="scss" scoped>
</style>